<!--Vue自定义组件-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
  <!--v-bind:li="item"   绑定映射，起到传递参数的作用-->
  <!--v-for="item in items"   item：遍历出的单个项，items：数组，集合等-->
  <component1 v-for="item in items" v-bind:li="item"></component1>
</div>
<script>
  /*props:['li'],
    template:'<li>{{li}}</li>'
    获取传递的参数并将其显示出来*/
  Vue.component("component1",{
    props:['li'],
    template:'<li>{{li}}</li>'
  });
  var vm = new Vue({
    el:"#one",
    data:{
      items:['A','B','C']
    },
  });
</script>
</body>
</html>